<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>todolist功能开发</title>
    <script src="vue.js"></script>
</head>
<body>
    
    <div id="root">
        <div>
            <input v-model="inputValue"/>
            <button @click="handleSubmit">提交</button>
        </div>
        <ul>
            <todo-item v-for="(item, index) of list" :key="index" :content1="item"></todo-item>
            <!-- :content1 把content1属性传给todo-item这个组件，content1这个名字可以随便取 -->
        </ul>
    </div>

    <script>

        // 全局组件，不需要使用components来注册
        Vue.component('todo-item', {
            props: ['content1'],                 //组件接收从外部传进来的名字叫做content1的属性，只有接收之后，组件里才能使用content1这个属性
            template: '<li>{{content1}}</li>'
        })


        //局部组件
        // var TodoItem = {
        //     template: '<li>item</li>'
        // }


        new Vue({
            el: "#root",
            //要想在其他vue实例中使用这个局部组件，必须通过components对这个局部组件进行注册，注册好这个组件后在实例模版中就可以使用局部组件
            // components: {                 
            //     'todo-item': TodoItem
            // },
            data: {
                inputValue: '',
                list: []
            },
            methods: {
                handleSubmit: function() {
                    this.list.push(this.inputValue)
                    this.inputValue = ''
                }
            }
        })
    </script>

</body>
</html>